import React, {useState, useCallback, useEffect} from 'react';
import { useHistory, useLocation } from 'react-router-dom'
import {collectionTypeEnuObj} from '../../enum'
import {getSofBillingAccountDetail} from '../../api'
import AddRegisterMoneyModule from './components/AddRegisterMoneyModule'
import { RegisterMoneyAll } from './style'
import {PageHeader, message, Table, Button} from 'antd'

/**
 * @description: 实收、应收  操作-》登记到账
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-02）写注释
 */

const RegisterMoney = () => {
    // id, item, ribAccounts, actAccounts
    const history = useHistory()
    const location = useLocation()
    const {id, item, ribAccounts, actAccounts, conNo} = location.state
    const [loading, setLoading] = useState(false)
    const [listData, setListData] = useState([])
    const [addRegisterMoneyModuleShow, setAddRegisterMoneyModuleShow] = useState(false)
    const listFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofBillingAccountDetail({billId: id})
                if (code === '20000') {
                    setListData(data)
                    setLoading(false)
                } else {
                    message.error(msg)
                }
            })()
        },
        [id],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    //添加登记到账
    const handleAddRegisterMoney = () => {
        setAddRegisterMoneyModuleShow(true)
    }
    const columns = [
        {
            title: '编号',
            render: (text, recode, index) => <span>{index  + 1}</span>
        },
        {
            title: '到账金额',
            dataIndex: 'actAccounts'
        },
        {
            title: '到账时间',
            dataIndex: 'actAccountsDate'
        },

        {
            title: '收款方式',
            dataIndex: 'paymentTerm'
        },

    ];
    return <RegisterMoneyAll>
        <PageHeader
            className="site-page-header"
            onBack={() => history.go('-1')}
            title="登记到账"
            subTitle={`收费科目：${collectionTypeEnuObj[item]}, 应收金额${ribAccounts},：实收金额：${actAccounts}`}
            extra={[<Button key="1" type="primary" onClick = {() => handleAddRegisterMoney()}>登记到账</Button>]}
        />
        <Table dataSource={listData} columns={columns}  rowKey='id' loading={loading} bordered size = 'small' />
        <AddRegisterMoneyModule 
            setAddRegisterMoneyModuleShow = {setAddRegisterMoneyModuleShow}
            addRegisterMoneyModuleShow ={addRegisterMoneyModuleShow}
            billId = {id}
            conNo ={conNo}
            listFun = {listFun}
        />
    </RegisterMoneyAll>
}

export default RegisterMoney